<template>
  <f7-page
    :name="name"
    @page:init="onPageInit"
    @page:afterin="onPageAfterIn"
    @page:beforeout="onPageBeforeOut"
    @page:beforeremove="onPageBeforeRemove"
  >
    <f7-toolbar bottom class="toolbar-two wechat-btn">
      <f7-link @click="del()">
        <span class="link-span">删除</span>
      </f7-link>
      <f7-link @click="update()">
        <span class="link-span">编辑</span>
      </f7-link>
    </f7-toolbar>
    <div class="detail-div-body">
      <h2>
        {{ lawQuery.title }}
        （ {{ lawQuery.type == "practice" ? "实践" : "评估" }} ）
      </h2>

      <div class="detail-main">
        <div
          class="detail-content textarea-detail-content"
          style="padding: 10px 0px 10px 0px;"
          v-html="lawQuery.content||''"
        ></div>
      </div>

      <div
        class="story-img"
        v-if="lawQuery.image && lawQuery.image.length > 0"
        v-for="el in lawQuery.image"
        :key="el.id+'-img'"
      >
        <img :src="el.url" :alt="el.name" />
      </div>
    </div>
  </f7-page>
</template>

<script>
import Log from "../../mod/log.js";
import strings from "../../assets/strings";

import LawDetail from "../components/detail.vue";
import Http from "../../js/mod.http";
import Utils from "../../js/mod.utils";
import AlertUtils from "../../mod/utils.alert";
import ConstantUtils from "../../js/vue.constant";
import Dialog from "../../js/vue.dialog";

import ToastUtils from "../../mod/utils.toast";

const name = strings.page.land.detail;
const log = new Log(name);

export default {
  components: {
    LawDetail,
  },
  data() {
    return {
      name: name,

      id: "",
      from: "law-detail",
      lawQuery: {},
    };
  },
  methods: {
    onCreated() {
      let _this = this;
    },
    onMounted() {
      let _this = this;
    },
    onPageInit() {
      let _this = this;
      let query = Utils.getParamData(_this);
      _this.id = query.id || 0;

      _this.getLawQueryInfo();

      Utils.bindEvent(
        _this,
        Utils.kEvents.updateStoryDetail,
        _this.getLawQueryInfo
      );
    },
    onPageAfterIn() {
      let _this = this;
      Utils.setTitle(_this, "课程信息");
      Utils.setBack(_this, function (e) {
        _this.onBack();
      });
      // cordova.addAndroidHook(_this);
    },
    onPageBeforeOut() {
      let _this = this;
      // cordova.removeAndroidHook(_this);
    },
    onPageBeforeRemove() {
      let _this = this;
      Utils.unbindEvent(
        _this,
        Utils.kEvents.updateStoryDetail,
        _this.getLawQueryInfo
      );
    },
    getLawQueryInfo() {
      let _this = this;
      let data = {
        id: _this.id,
        openid: _this.$f7.data.openid,
      };
      let _successQuery = (res) => {
        let resData = res.data || {};
        _this.lawQuery = resData;
      };
      let params = {
        url: Http.kInterfacePath.story.query,
        data: data,
        warn_error: "获取详情失败！",
        success: _successQuery,
      };
      Http.ajax(_this, params);
    },

    update() {
      let _this = this;
      let data = {
        id: _this.id,
        type: _this.lawQuery.type,
      };
      Utils.load(_this, "/story-add/", data, {});
    },
    del() {
      let _this = this;
      AlertUtils.alert.show(
        AlertUtils.param.alert({
          title: "确定删除？",
          buttons: [
            {
              onClick() {},
            },
            {
              onClick() {
                // 是
                _this.delete();
              },
            },
          ],
        })
      );
    },
    delete() {
      let _this = this;
      let data = {
        ids: [_this.id],
      };
      let _successDel = (res) => {
        let resData = res.data || {};
        Utils.fireEvent(_this, Utils.kEvents.updateStoryList, {});
        _this.onBack();
      };
      let params = {
        url: Http.kInterfacePath.story.del,
        data: data,
        warn_error: "删除失败！",
        success: _successDel,
      };
      Http.ajax(_this, params);
    },

    onBack() {
      let _this = this;
      _this.$f7router.back();
    },
    onResume() {
      log.w("onResume");
    },
    onPause() {
      log.w("onPause");
    },
  },
  created() {
    this.onCreated();
  },
  mounted() {
    this.onMounted();
  },
};
</script>

<style scoped>
</style>